<template>
  <div class="search-container">
    <el-input  v-model="query"  placeholder="请输入商家"  class="search-input"  clearable  suffix-icon="el-icon-search">
      <template #append>
        <el-button @click="search" class="search-button">查询</el-button>
      </template>
    </el-input>

    <!-- 对话框，用于在没有找到商家或查询失败时显示提示信息 -->
    <el-dialog :visible.sync="dialogVisible" title="提示" width="30%">
      <span>{{ message }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" type="primary">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from '@/axios'

export default {
  data() {
    return {
      query: '',  // 用户输入的查询字符串
      dialogVisible: false,  // 对话框是否可见
      message: '', // 对话框中显示的提示信息
    };
  },
  methods: {
    /* 异步方法 */
    async search() {
      try {
        const response = await axios.get(`/api/user/merchantinfo?query=${this.query}`);
        if (response.data.exists) {
          // 如果查询成功且找到了商家，则页面跳转到商家的详情页面
          this.$router.push(`/user_merchantinfo/${response.data.merchant_ID}`);
        } else {
          // 如果未找到商家或查询失败，则显示相应的提示信息
          this.message = '未找到相关商家';
          this.dialogVisible = true;
        }
      } catch (error) {
        this.message = '查询失败，请稍后再试';
        this.dialogVisible = true;
      }
    },
  },
};
</script>

<style scoped>
.search-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.search-input {
  width: 400px;
  margin-right: -1px;
}

.search-button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background-color: #409EFF;
  color: #fff;
  transition: background-color 0.3s;
}

.search-button:hover {
  background-color: #66b1ff;
}

.el-dialog__footer {
  display: flex;
  justify-content: flex-end;
}

.dialog-footer .el-button {
  margin: 0;
}
</style>
